<template>
  <div>
      <h1>toRef</h1>
      <p>name: <input v-model="name"> {{name}}</p>
      <p>学校: <input v-model="school"> {{people.school}}</p>
      <p>name: <input v-model="people.name"> {{people.name}}</p>
      <p>age:{{age}}</p>
      <h1>父组件</h1>
      <p>要传入子组件的值: {{name2}}</p>
      <h1>子组件</h1>
      <to-ref-sub :name="name2"></to-ref-sub>
  </div>
</template>

<script>

import {reactive,toRef,ref} from "vue";
import ToRefSub from "./ToRefSub";


export default {
    components: {
        ToRefSub
    },
    setup() {
        let people = reactive({name: "Hydra",age:35});

        // toRef对响应式的对象的某个属性再进行响应式包装
        // 实际上就是对单个属性调用ref()进行包装
        let name = toRef(people,"name");
        let age = toRef(people,"age");
        // people没有学校属性，toRef也会创建一个响应对象，并且来操作对象原本没有的属性
        let school = toRef(people,"school");

        setInterval(() => {
            age.value ++;
            // console.log(age.value);
        }, 1000);

        let name2 = ref("罗佰君")

        // 如果直接 {name: people.name}这样把响应式对象的属性暴露出去，会有响应延迟的BUG
        return {name,age,people,school,name2}
    }
}
</script>

<style>

</style>